[V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: var(--accent-hue, 262.1) 83.3% 57.8%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: var(--accent-hue, 262.1) 83.3% 57.8%; --accent-foreground: 210 40% 98%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: var(--accent-hue, 262.1) 83.3% 57.8%; --radius: 0.5rem; /* Glass effect variables */ --glass-opacity: 70%; --accent-hue: 262.1; /* Sidebar variables */ --sidebar-width: 280px; --sidebar-width-icon: 3rem; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 0 0% 98%; --sidebar-primary-foreground: 240 5.9% 10%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; /* Gradients */ --purple-gradient: linear-gradient(to right, hsl(262.1, 83.3%, 57.8%), hsl(322.1, 83.3%, 57.8%)); --blue-gradient: linear-gradient(to right, hsl(221.2, 83.3%, 57.8%), hsl(241.2, 83.3%, 57.8%)); --green-gradient: linear-gradient(to right, hsl(142.1, 83.3%, 57.8%), hsl(162.1, 83.3%, 57.8%)); --red-gradient: linear-gradient(to right, hsl(0, 83.3%, 57.8%), hsl(20, 83.3%, 57.8%)); --orange-gradient: linear-gradient(to right, hsl(24.6, 83.3%, 57.8%), hsl(44.6, 83.3%, 57.8%)); --pink-gradient: linear-gradient(to right, hsl(322.1, 83.3%, 57.8%), hsl(342.1, 83.3%, 57.8%)); --teal-gradient: linear-gradient(to right, hsl(166.2, 83.3%, 57.8%), hsl(186.2, 83.3%, 57.8%)); /* Message sizing */ --message-max-width-sm: 300px; --message-max-width-md: 450px; --message-max-width-lg: 650px; --message-min-width: 80px; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: var(--accent-hue, 262.1) 83.3% 57.8%; --primary-foreground: 210 40% 98%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: var(--accent-hue, 262.1) 83.3% 57.8%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: var(--accent-hue, 262.1) 83.3% 57.8%; /* Sidebar variables */ --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 0 0% 98%; --sidebar-primary-foreground: 240 5.9% 10%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } body { @apply bg-background text-foreground; } /* Glass morphism effects */ .backdrop-blur-xl { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .backdrop-blur-sm { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Typing indicator animation */ .typing-indicator { display: flex; align-items: center; gap: 4px; } .typing-indicator span { width: 8px; height: 8px; background-color: #a78bfa; border-radius: 50%; display: inline-block; animation: bounce 1.4s infinite ease-in-out both; } .typing-indicator span:nth-child(1) { animation-delay: -0.32s; } .typing-indicator span:nth-child(2) { animation-delay: -0.16s; } @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } } /* Custom scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); } ::-webkit-scrollbar-thumb { background: rgba(128, 90, 213, 0.5); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(128, 90, 213, 0.8); } /* Message hover effect */ .message-actions { opacity: 0; transition: opacity 0.2s ease-in-out; } .message-container:hover .message-actions { opacity: 1; } /* Auto-resize textarea */ textarea { overflow-y: hidden; } /* Code block styling */ pre { position: relative; margin: 0.5rem 0; border-radius: 0.375rem; overflow: hidden; } code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } /* Gradient text */ .gradient-text { background: linear-gradient(to right, hsl(var(--primary)), hsl(var(--accent))); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } /* Glow effects */ .glow { box-shadow: 0 0 15px rgba(var(--primary), 0.5); } .glow-text { text-shadow: 0 0 10px rgba(var(--primary), 0.7); } /* Animations */ @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } .animate-float { animation: float 6s ease-in-out infinite; } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 5px rgba(var(--primary), 0.5); } 50% { box-shadow: 0 0 20px rgba(var(--primary), 0.8); } } .animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; } /* Gradient borders */ .gradient-border { position: relative; border-radius: var(--radius); } .gradient-border::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(to right, hsl(var(--primary)), hsl(var(--accent))); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* Responsive message bubbles */ @media (max-width: 640px) { .message-bubble { max-width: calc(100% - 80px); } } @media (min-width: 641px) and (max-width: 1024px) { .message-bubble { max-width: min(70%, 450px); } } @media (min-width: 1025px) { .message-bubble { max-width: min(65%, 650px); } } /* Dynamic content-based sizing */ .auto-size-content { width: fit-content; min-width: var(--message-min-width); } /* Model badge styling */ .model-badge { font-size: 0.65rem; padding: 1px 6px; border-radius: 9999px; background-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7); white-space: nowrap; max-width: 100px; overflow: hidden; text-overflow: ellipsis; } [V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/chat-sidebar.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" import { Plus, X, MessageSquare, Trash2, ChevronRight, Pin, PinOff, Folder, FolderOpen } from "lucide-react" import { Sheet, SheetContent } from "@/components/ui/sheet" import { ScrollArea } from "@/components/ui/scroll-area" import { Input } from "@/components/ui/input" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, } from "@/components/ui/dropdown-menu" import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible" import { Badge } from "@/components/ui/badge" interface Message { id: string content: string role: "user" | "assistant" | "system" timestamp: Date } interface Chat { id: string title: string messages: Message[] createdAt: Date pinned?: boolean folder?: string model?: string systemPrompt?: string } interface FolderType { id: string name: string } interface SidebarProps { chats: Chat[] folders: FolderType[] activeChat: string setActiveChat: (chatId: string) => void createNewChat: () => void deleteChat: (chatId: string) => void togglePinChat: (chatId: string) => void setFolderForChat: (chatId: string, folderId: string | null) => void isOpen: boolean setIsOpen: (isOpen: boolean) => void isMobile: boolean searchQuery: string setSearchQuery: (query: string) => void isSearching: boolean setIsSearching: (isSearching: boolean) => void accentColor: string } export function Sidebar({ chats, folders, activeChat, setActiveChat, createNewChat, deleteChat, togglePinChat, setFolderForChat, isOpen, setIsOpen, isMobile, searchQuery, setSearchQuery, isSearching, setIsSearching, accentColor, }: SidebarProps) { const [openFolders, setOpenFolders] = useState>({}) const [filteredChats, setFilteredChats] = useState(chats) const [hoveredChat, setHoveredChat] = useState(null) // Initialize folders as open useEffect(() => { const initialOpenState: Record = {} folders.forEach((folder) => { initialOpenState[folder.id] = true }) setOpenFolders(initialOpenState) }, [folders]) // Filter chats based on search query useEffect(() => { if (!searchQuery.trim()) { setFilteredChats(chats) return } const filtered = chats.filter( (chat) => chat.title.toLowerCase().includes(searchQuery.toLowerCase()) || chat.messages.some((msg) => msg.content.toLowerCase().includes(searchQuery.toLowerCase())), ) setFilteredChats(filtered) }, [searchQuery, chats]) const handleChatSelect = (chatId: string) => { setActiveChat(chatId) if (isMobile) { setIsOpen(false) } } const toggleFolder = (folderId: string) => { setOpenFolders((prev) => ({ ...prev, [folderId]: !prev[folderId], })) } // Format date to show today, yesterday, or date const formatDate = (date: Date) => { const today = new Date() const yesterday = new Date(today) yesterday.setDate(yesterday.getDate() - 1) if (date.toDateString() === today.toDateString()) { return "Today" } else if (date.toDateString() === yesterday.toDateString()) { return "Yesterday" } else { return date.toLocaleDateString("en-US", { month: "short", day: "numeric" }) } } // Get pinned chats const pinnedChats = filteredChats.filter((chat) => chat.pinned) // Get chats by folder const chatsByFolder: Record = {} folders.forEach((folder) => { chatsByFolder[folder.id] = filteredChats.filter((chat) => chat.folder === folder.id) }) // Get chats without folder const chatsWithoutFolder = filteredChats.filter((chat) => !chat.folder && !chat.pinned) const sidebarContent = ( <> {/* Header with New Chat button and search */}

{isSearching && (

setSearchQuery(e.target.value)} placeholder="Search chats..." className="bg-white/5 backdrop-blur-xl border-white/10 text-white placeholder:text-gray-400 pr-8" />

)}

{/* Chat list */} {/* Pinned chats section */} {pinnedChats.length > 0 && (

Pinned

{pinnedChats.map((chat) => ( handleChatSelect(chat.id)} onDelete={() => deleteChat(chat.id)} onTogglePin={() => togglePinChat(chat.id)} onSetFolder={(folderId) => setFolderForChat(chat.id, folderId)} folders={folders} isHovered={hoveredChat === chat.id} setIsHovered={(isHovered) => setHoveredChat(isHovered ? chat.id : null)} accentColor={accentColor} /> ))}

)} {/* Folders */} {folders.map((folder) => { const folderChats = chatsByFolder[folder.id] || [] if (folderChats.length === 0) return null return ( toggleFolder(folder.id)} className="mb-2" >

{folder.name} {folderChats.length}

{folderChats.map((chat) => ( handleChatSelect(chat.id)} onDelete={() => deleteChat(chat.id)} onTogglePin={() => togglePinChat(chat.id)} onSetFolder={(folderId) => setFolderForChat(chat.id, folderId)} folders={folders} isHovered={hoveredChat === chat.id} setIsHovered={(isHovered) => setHoveredChat(isHovered ? chat.id : null)} accentColor={accentColor} /> ))}

) })} {/* Chats without folder */} {chatsWithoutFolder.length > 0 && (

Recent Chats

{chatsWithoutFolder.map((chat) => ( handleChatSelect(chat.id)} onDelete={() => deleteChat(chat.id)} onTogglePin={() => togglePinChat(chat.id)} onSetFolder={(folderId) => setFolderForChat(chat.id, folderId)} folders={folders} isHovered={hoveredChat === chat.id} setIsHovered={(isHovered) => setHoveredChat(isHovered ? chat.id : null)} accentColor={accentColor} /> ))}

)} {/* Footer with user info */}

Dollar Gill

instagram.com/dollargill

Visit Store

) // Mobile sidebar using Sheet component if (isMobile) { return (

{sidebarContent}

) } // Desktop sidebar return (

{isOpen && sidebarContent}

) } // Chat item component function ChatItem({ chat, isActive, onSelect, onDelete, onTogglePin, onSetFolder, folders, isHovered, setIsHovered, accentColor, }: { chat: { id: string title: string pinned?: boolean model?: string } isActive: boolean onSelect: () => void onDelete: () => void onTogglePin: () => void onSetFolder: (folderId: string | null) => void folders: { id: string; name: string }[] isHovered: boolean setIsHovered: (isHovered: boolean) => void accentColor: string }) { return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>

{chat.pinned ? ( <> Unpin ) : ( <> Pin )} Move to folder onSetFolder(null)}> None {folders.map((folder) => ( onSetFolder(folder.id)}> {folder.name} ))} Delete

) } function getModelLabel(model: string): string { const modelShortNames: Record = { "gpt-4o": "GPT-4o", "gpt-4o-mini": "4o Mini", "gpt-4-turbo": "GPT-4 Turbo", "gpt-4": "GPT-4", "gpt-3.5-turbo": "GPT-3.5", "claude-3-opus": "Claude Opus", "claude-3-sonnet": "Claude Sonnet", "claude-3-haiku": "Claude Haiku", "mistral-large": "Mistral Large", "mistral-medium": "Mistral Medium", "llama-3-70b": "Llama 3 70B", "llama-3-8b": "Llama 3 8B", } return modelShortNames[model] || model } [V0_FILE]typescriptreact:file="hooks/use-mobile.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" export function useMediaQuery(query: string): boolean { const [matches, setMatches] = useState(false) useEffect(() => { const media = window.matchMedia(query) if (media.matches !== matches) { setMatches(media.matches) } const listener = () => setMatches(media.matches) media.addEventListener("change", listener) return () => media.removeEventListener("change", listener) }, [matches, query]) return matches } [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/prompt-templates.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { ScrollArea } from "@/components/ui/scroll-area" import { Input } from "@/components/ui/input" import { X, Search, Lightbulb, Code, PenTool, Brain, BookOpen, Sparkles } from "lucide-react" interface PromptTemplatesProps { onSelect: (prompt: string) => void onClose: () => void } interface PromptTemplate { id: string title: string prompt: string category: string icon: React.ReactNode } export function PromptTemplates({ onSelect, onClose }: PromptTemplatesProps) { const [searchQuery, setSearchQuery] = useState("") const templates: PromptTemplate[] = [ { id: "1", title: "Explain a concept", prompt: "Explain [concept] in simple terms as if I'm a beginner.", category: "learning", icon: , }, { id: "2", title: "Code review", prompt: "Review this code and suggest improvements:\n\n```\n// Paste your code here\n```", category: "coding", icon:

,
    },
    {
      id: "3",
      title: "Creative writing",
      prompt: "Write a short story about [topic] in the style of [author/genre].",
      category: "creative",
      icon: ,
    },
    {
      id: "4",
      title: "Brainstorm ideas",
      prompt: "Brainstorm 10 creative ideas for [project/topic].",
      category: "ideation",
      icon: ,
    },
    {
      id: "5",
      title: "Summarize text",
      prompt: "Summarize the following text in 3-5 bullet points:\n\n[paste text here]",
      category: "learning",
      icon: ,
    },
    {
      id: "6",
      title: "Debug code",
      prompt: "Debug this code and explain what's wrong:\n\n```\n// Paste your code here\n```",
      category: "coding",
      icon: ,
    },
    {
      id: "7",
      title: "Improve writing",
      prompt: "Improve this text to make it more engaging and professional:\n\n[paste text here]",
      category: "creative",
      icon: ,
    },
    {
      id: "8",
      title: "Generate function",
      prompt: "Write a [language] function that [describe what the function should do].",
      category: "coding",
      icon: ,
    },
  ]

  const filteredTemplates =
    searchQuery.trim() === ""
      ? templates
      : templates.filter(
          (template) =>
            template.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
            template.prompt.toLowerCase().includes(searchQuery.toLowerCase()) ||
            template.category.toLowerCase().includes(searchQuery.toLowerCase()),
        )

  // Group templates by category
  const groupedTemplates: Record = {}
  filteredTemplates.forEach((template) => {
    if (!groupedTemplates[template.category]) {
      groupedTemplates[template.category] = []
    }
    groupedTemplates[template.category].push(template)
  })

  return (
    
      
        
           Prompt Templates
        
        
      

      
        
         setSearchQuery(e.target.value)}
          className="pl-8 bg-white/5 border-white/10"
        />
      

      
        
          {Object.entries(groupedTemplates).map(([category, templates]) => (
            
              
                {category.charAt(0).toUpperCase() + category.slice(1)}
              
              
                {templates.map((template) => (
                  
                ))}
              
            
          ))}

          {filteredTemplates.length === 0 && (
            
              No templates found for "{searchQuery}"
            
          )}
        
      
    
  )
}

[V0_FILE]typescriptreact:file="components/theme-selector.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Label } from "@/components/ui/label"
import { cn } from "@/lib/utils"
import { Check } from "lucide-react"

interface Theme {
  id: string
  name: string
  bgClass: string
  accentClass: string
}

export function ThemeSelector() {
  const [selectedTheme, setSelectedTheme] = useState("default")

  const themes: Theme[] = [
    {
      id: "default",
      name: "Default",
      bgClass: "from-gray-900 via-gray-800 to-gray-900",
      accentClass: "from-purple-600 to-pink-600",
    },
    {
      id: "midnight",
      name: "Midnight",
      bgClass: "from-blue-950 via-indigo-950 to-blue-950",
      accentClass: "from-blue-500 to-indigo-500",
    },
    {
      id: "emerald",
      name: "Emerald",
      bgClass: "from-green-950 via-emerald-950 to-green-950",
      accentClass: "from-emerald-500 to-green-500",
    },
    {
      id: "sunset",
      name: "Sunset",
      bgClass: "from-orange-950 via-red-950 to-orange-950",
      accentClass: "from-orange-500 to-red-500",
    },
    {
      id: "cosmic",
      name: "Cosmic",
      bgClass: "from-violet-950 via-purple-950 to-violet-950",
      accentClass: "from-violet-500 to-purple-500",
    },
    {
      id: "ocean",
      name: "Ocean",
      bgClass: "from-cyan-950 via-blue-950 to-cyan-950",
      accentClass: "from-cyan-500 to-blue-500",
    },
  ]

  return (
    
      Theme
      
        {themes.map((theme) => (
          
        ))}
      
    
  )
}

[V0_FILE]typescriptreact:file="components/voice-recorder.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Mic, MicOff, X, Loader2 } from "lucide-react"
import { cn } from "@/lib/utils"

interface VoiceRecorderProps {
  onTranscript: (transcript: string) => void
  onClose: () => void
}

export function VoiceRecorder({ onTranscript, onClose }: VoiceRecorderProps) {
  const [isRecording, setIsRecording] = useState(false)
  const [transcript, setTranscript] = useState("")
  const [recordingTime, setRecordingTime] = useState(0)
  const [isProcessing, setIsProcessing] = useState(false)

  useEffect(() => {
    let interval: NodeJS.Timeout

    if (isRecording) {
      interval = setInterval(() => {
        setRecordingTime((prev) => prev + 1)
      }, 1000)
    }

    return () => {
      if (interval) clearInterval(interval)
    }
  }, [isRecording])

  const toggleRecording = () => {
    if (isRecording) {
      stopRecording()
    } else {
      startRecording()
    }
  }

  const startRecording = () => {
    setIsRecording(true)
    setRecordingTime(0)
    setTranscript("")
  }

  const stopRecording = () => {
    setIsRecording(false)

    // Simulate processing
    setIsProcessing(true)
    setTimeout(() => {
      // Simulate transcript
      const simulatedTranscript =
        "This is a simulated voice transcript. In a real application, this would be generated from your voice input using a speech-to-text service."
      setTranscript(simulatedTranscript)
      setIsProcessing(false)
    }, 1500)
  }

  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60)
    const secs = seconds % 60
    return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`
  }

  const handleSubmit = () => {
    onTranscript(transcript)
  }

  return (
    
      
        
           Voice Input
        
        
      

      
        
          

          {isRecording && (
            
              {formatTime(recordingTime)}
            
          )}
        

        {isRecording && (
          
            
            Recording...
          
        )}

        {transcript && (
          
            Transcript:
            {transcript}
            
              
            
          
        )}

        {!isRecording && !transcript && !isProcessing && (
          Click the microphone button to start recording your voice
        )}

        {isProcessing && (
          
            
            Processing audio...
          
        )}
      
    
  )
}

[V0_FILE]typescriptreact:file="components/image-generator.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { X, Wand2, Loader2, ImageIcon } from "lucide-react"
import { cn } from "@/lib/utils"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

interface ImageGeneratorProps {
  onGenerate: (prompt: string) => void
  onClose: () => void
}

export function ImageGenerator({ onGenerate, onClose }: ImageGeneratorProps) {
  const [prompt, setPrompt] = useState("")
  const [isGenerating, setIsGenerating] = useState(false)
  const [style, setStyle] = useState("realistic")

  const handleGenerate = () => {
    if (!prompt.trim()) return

    setIsGenerating(true)

    // Simulate generation delay
    setTimeout(() => {
      onGenerate(prompt)
      setIsGenerating(false)
    }, 1000)
  }

  const styleOptions = [
    { value: "realistic", label: "Realistic" },
    { value: "digital-art", label: "Digital Art" },
    { value: "anime", label: "Anime" },
    { value: "oil-painting", label: "Oil Painting" },
    { value: "watercolor", label: "Watercolor" },
    { value: "pixel-art", label: "Pixel Art" },
  ]

  return (
    
      
        
           Image Generator
        
        
      

      
        
          Describe the image you want to generate
           setPrompt(e.target.value)}
            className="bg-white/5 border-white/10 resize-none min-h-[100px]"
          />
        </div>

        <div className="space-y-2">
          <Label htmlFor="image-style">Style</Label>
          <Select value={style} onValueChange={setStyle}>
            <SelectTrigger id="image-style" className="bg-white/5 border-white/10">
              <SelectValue placeholder="Select style" />
            </SelectTrigger>
            <SelectContent className="bg-gray-800/90 backdrop-blur-xl border-white/10 text-white">
              {styleOptions.map((option) => (
                <SelectItem key={option.value} value={option.value}>
                  {option.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

        <div className="flex justify-between items-center">
          <p className="text-xs text-gray-400">{prompt.length} / 1000 characters</p>
          <Button
            onClick={handleGenerate}
            disabled={!prompt.trim() || isGenerating}
            className={cn(
              "bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700",
              isGenerating && "opacity-80",
            )}
          >
            {isGenerating ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Generating...
              </>
            ) : (
              <>
                <ImageIcon className="mr-2 h-4 w-4" />
                Generate Image
              </>
            )}
          </Button>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/chat-message.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { cn } from "@/lib/utils"
import { Avatar } from "@/components/ui/avatar"
import {
  User,
  Bot,
  Copy,
  Check,
  RotateCcw,
  Smile,
  Download,
  Share2,
  MoreVertical,
  ExternalLink,
  Instagram,
  ShoppingBag,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import Image from "next/image"

interface Message {
  id: string
  content: string
  role: "user" | "assistant" | "system"
  timestamp: Date
  attachments?: string[]
  isCode?: boolean
  language?: string
  reactions?: string[]
  isImage?: boolean
  imagePrompt?: string
}

interface ChatMessageProps {
  message: Message
  chat?: {
    model?: string
  }
  onReaction?: (reaction: string) => void
}

function getLabelForModel(model: string): string {
  const modelMap: Record<string, string> = {
    "gpt-4o": "GPT-4o",
    "gpt-4o-mini": "4o Mini",
    "gpt-4-turbo": "GPT-4T",
    "gpt-4": "GPT-4",
    "gpt-3.5-turbo": "3.5T",
    "claude-3-opus": "Claude",
    "claude-3-sonnet": "Claude",
    "claude-3-haiku": "Claude",
    "mistral-large": "Mistral",
    "mistral-medium": "Mistral",
    "llama-3-70b": "Llama",
    "llama-3-8b": "Llama",
  }

  return modelMap[model] || model
}

export default function ChatMessage({ message, chat, onReaction }: ChatMessageProps) {
  const isUser = message.role === "user"
  const isSystem = message.role === "system"
  const [isCopied, setIsCopied] = useState(false)
  const [showReactions, setShowReactions] = useState(false)
  const [isHovered, setIsHovered] = useState(false)

  // Parse code blocks from content if not already marked as code
  const hasCodeBlock = !message.isCode && message.content.includes("```")

  // Available reactions
  const reactions = ["👍", "❤️", "😊", "🎉", "🚀", "👏", "🔥", "💯", "🤔", "👀"]

  // Get model label
  const modelLabel = chat?.model ? getLabelForModel(chat.model) : ""

  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text)
    setIsCopied(true)
    setTimeout(() => setIsCopied(false), 2000)
  }

  // Function to render image
  const renderImage = () => {
    if (!message.isImage) return null

    return (
      <div className="relative mt-2 rounded-lg overflow-hidden group">
        <div className="absolute inset-0 bg-gradient-to-b from-transparent to-black/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <Image
          src={message.content || "/placeholder.svg"}
          alt={message.imagePrompt || "Generated image"}
          width={512}
          height={512}
          className="rounded-lg w-full max-w-md shadow-xl transition-transform duration-300 group-hover:scale-[1.01]"
        />
        <div className="absolute bottom-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex gap-1">
          <Button
            variant="secondary"
            size="icon"
            className="h-8 w-8 rounded-full bg-black/50 backdrop-blur-md hover:bg-black/70"
            onClick={() => {}}
          >
            <Download className="h-4 w-4" />
          </Button>
          <Button
            variant="secondary"
            size="icon"
            className="h-8 w-8 rounded-full bg-black/50 backdrop-blur-md hover:bg-black/70"
            onClick={() => {}}
          >
            <Share2 className="h-4 w-4" />
          </Button>
        </div>
        {message.imagePrompt && (
          <div className="absolute bottom-0 left-0 right-0 p-2 bg-black/50 backdrop-blur-sm text-xs text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <p className="line-clamp-2">{message.imagePrompt}</p>
          </div>
        )}
      </div>
    )
  }

  // Function to parse and render content with code blocks
  const renderContent = () => {
    if (message.isImage) {
      return renderImage()
    }

    if (message.isCode) {
      return (
        <div className="relative rounded-md overflow-hidden mt-2 group">
          <div className="absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity z-10 flex gap-1">
            <Button
              variant="secondary"
              size="icon"
              className="h-8 w-8 rounded-full bg-black/50 backdrop-blur-md hover:bg-black/70"
              onClick={() => copyToClipboard(message.content.replace(/```\w*\n?|\n?```/g, ""))}
            >
              {isCopied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
            </Button>
          </div>
          <SyntaxHighlighter
            language={message.language || "javascript"}
            style={vscDarkPlus}
            customStyle={{
              margin: 0,
              borderRadius: "0.375rem",
              fontSize: "0.875rem",
              background: "rgba(0, 0, 0, 0.3)",
            }}
            wrapLongLines={true}
          >
            {message.content.replace(/```\w*\n?|\n?```/g, "")}
          </SyntaxHighlighter>
        </div>
      )
    }

    if (hasCodeBlock) {
      const parts = message.content.split(/(```[\s\S]*?```)/g)
      return parts.map((part, index) => {
        if (part.startsWith("```") && part.endsWith("```")) {
          // Extract language if specified
          const match = part.match(/```(\w+)?/)
          const language = match && match[1] ? match[1] : "javascript"
          const code = part.replace(/```\w*\n?|\n?```/g, "")

          return (
            <div key={index} className="relative rounded-md overflow-hidden mt-2 group">
              <div className="absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity z-10">
                <Button
                  variant="secondary"
                  size="icon"
                  className="h-8 w-8 rounded-full bg-black/50 backdrop-blur-md hover:bg-black/70"
                  onClick={() => copyToClipboard(code)}
                >
                  {isCopied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
                </Button>
              </div>
              <SyntaxHighlighter
                language={language}
                style={vscDarkPlus}
                customStyle={{
                  margin: 0,
                  borderRadius: "0.375rem",
                  fontSize: "0.875rem",
                  background: "rgba(0, 0, 0, 0.3)",
                }}
                wrapLongLines={true}
              >
                {code}
              </SyntaxHighlighter>
            </div>
          )
        }

        return (
          <p key={index} className="text-sm whitespace-pre-wrap">
            {renderTextWithLinks(part)}
          </p>
        )
      })
    }

    return <p className="text-sm whitespace-pre-wrap">{renderTextWithLinks(message.content)}</p>
  }

  // Function to detect and render links in text
  const renderTextWithLinks = (text: string) => {
    // Regex to match URLs and specific patterns
    const urlRegex =
      /(https?:\/\/[^\s]+)|(\binstagram\.com\/[a-zA-Z0-9_.]+\b)|(\bwww\.[a-zA-Z0-9_.-]+\.[a-zA-Z]{2,}\b)/g

    // Split the text by URLs
    const parts = text.split(urlRegex)

    // Find all URLs in the text
    const urls = text.match(urlRegex) || []

    // Array to store the rendered elements
    const renderedElements: React.ReactNode[] = []

    // Current position in the parts array
    let currentIndex = 0

    // Process each part
    parts.forEach((part, index) => {
      if (!part) return // Skip empty parts

      // If this part is a URL (matches one of the found URLs)
      if (urls.includes(part)) {
        let url = part
        // Add https:// if missing
        if (!url.startsWith("http")) {
          url = "https://" + url
        }

        // Special handling for Instagram
        if (part.includes("instagram.com")) {
          renderedElements.push(
            <a
              key={`link-${index}`}
              href={url}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-1 px-3 py-1 my-1 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-full font-medium hover:from-purple-600 hover:to-pink-600 transition-all shadow-md hover:shadow-lg"
              onClick={(e) => e.stopPropagation()}
            >
              <Instagram className="h-4 w-4" />
              <span>Follow on Instagram</span>
              <ExternalLink className="h-3 w-3 ml-1" />
            </a>,
          )
        }
        // Special handling for flowersandsaints.com.au
        else if (part.includes("flowersandsaints.com.au")) {
          renderedElements.push(
            <a
              key={`link-${index}`}
              href={url}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-1 px-3 py-1 my-1 bg-gradient-to-r from-teal-500 to-emerald-500 text-white rounded-full font-medium hover:from-teal-600 hover:to-emerald-600 transition-all shadow-md hover:shadow-lg"
              onClick={(e) => e.stopPropagation()}
            >
              <ShoppingBag className="h-4 w-4" />
              <span>Visit Store</span>
              <ExternalLink className="h-3 w-3 ml-1" />
            </a>,
          )
        }
        // Generic link handling
        else {
          renderedElements.push(
            <a
              key={`link-${index}`}
              href={url}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-1 px-2 py-0.5 my-1 bg-blue-500/20 text-blue-300 rounded-md font-medium hover:bg-blue-500/30 transition-all"
              onClick={(e) => e.stopPropagation()}
            >
              <ExternalLink className="h-3 w-3" />
              <span className="break-all">{part}</span>
            </a>,
          )
        }

        currentIndex++
      }
      // Regular text
      else if (part.trim()) {
        renderedElements.push(<span key={`text-${index}`}>{part}</span>)
        currentIndex++
      }
    })

    return renderedElements
  }

  return (
    <div
      className={cn(
        "group flex gap-3 transition-transform duration-200 hover:scale-[1.01]",
        isUser ? "ml-auto" : isSystem ? "mx-auto max-w-[90%]" : "mr-auto",
        isSystem ? "opacity-80" : "",
      )}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {!isUser && !isSystem && (
        <div className="flex-shrink-0 mt-1">
          <Avatar className="h-8 w-8 bg-gradient-to-br from-purple-500 to-pink-600 text-white shadow-lg shadow-purple-500/20">
            <Bot className="h-4 w-4" />
          </Avatar>
        </div>
      )}

      <div
        className={cn(
          "relative rounded-2xl p-4 transition-all duration-300",
          // Adjust width based on content type and length
          message.isCode || message.isImage
            ? "w-full max-w-full sm:max-w-[85%]"
            : message.content.length < 20
              ? "w-auto max-w-[180px]"
              : message.content.length < 60
                ? "w-auto max-w-[240px] sm:max-w-[280px]"
                : message.content.length < 200
                  ? "w-auto max-w-[300px] sm:max-w-[380px] md:max-w-[450px]"
                  : "w-auto max-w-[340px] sm:max-w-[450px] md:max-w-[650px]",
          // Different styling for different message types
          isUser
            ? "bg-gradient-to-br from-purple-600/80 to-pink-600/80 text-white rounded-tr-none backdrop-blur-xl border border-white/10 shadow-lg shadow-purple-500/10 ml-auto"
            : isSystem
              ? "bg-gray-800/40 border border-white/5 text-white backdrop-blur-xl shadow-lg mx-auto"
              : "bg-gray-800/60 border border-white/10 text-white rounded-tl-none backdrop-blur-xl shadow-lg mr-auto",
        )}
        style={{
          // Add custom width calculation for responsive sizing
          width: message.isCode || message.isImage ? "auto" : "fit-content",
        }}
      >
        {/* Glass reflection effect */}
        <div className="absolute inset-0 overflow-hidden rounded-2xl pointer-events-none">
          <div
            className={cn(
              "absolute inset-0 bg-gradient-to-br opacity-20",
              isUser ? "from-white/20 via-transparent to-transparent" : "from-white/10 via-transparent to-transparent",
            )}
          />
        </div>

        {renderContent()}

        {/* Message reactions */}
        {message.reactions && message.reactions.length > 0 && (
          <div className="flex gap-1 mt-2">
            {message.reactions.map((reaction, index) => (
              <span key={index} className="bg-white/10 backdrop-blur-md rounded-full px-2 py-1 text-xs">
                {reaction}
              </span>
            ))}
          </div>
        )}

        <div
          className={cn("text-xs mt-3 flex items-center justify-between", isUser ? "text-white/70" : "text-gray-400")}
        >
          <span className="flex items-center gap-1">
            {message.timestamp.toLocaleTimeString([], {
              hour: "2-digit",
              minute: "2-digit",
            })}
            {!isUser && !isSystem && message.role === "assistant" && (
              <span className="text-xs text-gray-500 ml-1 bg-white/10 rounded-full px-1.5 py-0.5">
                {getLabelForModel(chat?.model || "gpt-4o")}
              </span>
            )}
          </span>

          <div className={cn("flex gap-1 transition-opacity duration-200", isHovered ? "opacity-100" : "opacity-0")}>
            {!isUser && !isSystem && (
              <>
                <Popover open={showReactions} onOpenChange={setShowReactions}>
                  <PopoverTrigger asChild>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-6 w-6 rounded-full p-0 text-gray-400 hover:text-white hover:bg-white/10"
                    >
                      <Smile className="h-3 w-3" />
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent className="w-auto p-2 bg-gray-800/90 backdrop-blur-xl border-white/10">
                    <div className="flex gap-1 flex-wrap max-w-[200px]">
                      {reactions.map((reaction) => (
                        <button
                          key={reaction}
                          onClick={() => {
                            onReaction?.(reaction)
                            setShowReactions(false)
                          }}
                          className="text-xl p-2 hover:bg-white/10 rounded-md cursor-pointer transition-colors"
                        >
                          {reaction}
                        </button>
                      ))}
                    </div>
                  </PopoverContent>
                </Popover>

                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => copyToClipboard(message.content)}
                  className="h-6 w-6 rounded-full p-0 text-gray-400 hover:text-white hover:bg-white/10"
                >
                  {isCopied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
                </Button>

                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-6 w-6 rounded-full p-0 text-gray-400 hover:text-white hover:bg-white/10"
                    >
                      <MoreVertical className="h-3 w-3" />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent
                    align="end"
                    className="bg-gray-800/90 backdrop-blur-xl border-white/10 text-white"
                  >
                    <DropdownMenuItem>
                      <RotateCcw className="h-4 w-4 mr-2" />
                      <span>Regenerate</span>
                    </DropdownMenuItem>
                    <DropdownMenuItem>
                      <Share2 className="h-4 w-4 mr-2" />
                      <span>Share</span>
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </>
            )}
          </div>
        </div>
      </div>

      {isUser && (
        <div className="flex-shrink-0 mt-1">
          <Avatar className="h-8 w-8 bg-gradient-to-br from-blue-500 to-teal-500 text-white shadow-lg shadow-blue-500/20">
            <div className="flex items-center justify-center w-full h-full relative">
              <User className="h-4 w-4 absolute" style={{ opacity: 0.5 }} />
              <div className="h-3 w-3 rounded-full bg-white/80 absolute top-[6px]" />
              <div className="h-[10px] w-[10px] rounded-full border-2 border-white/80 absolute bottom-[7px] left-1/2 transform -translate-x-1/2" />
            </div>
          </Avatar>
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/content-filter-dialog.tsx"
"use client"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { AlertTriangle } from "lucide-react"

interface ContentFilterDialogProps {
  isOpen: boolean
  onClose: () => void
}

export function ContentFilterDialog({ isOpen, onClose }: ContentFilterDialogProps) {
  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="bg-gray-900/95 backdrop-blur-xl border-white/10 text-white max-w-md">
        <DialogHeader>
          <DialogTitle className="text-xl flex items-center gap-2 text-red-400">
            <AlertTriangle className="h-5 w-5" /> Content Warning
          </DialogTitle>
          <DialogDescription>
            Your message contains potentially inappropriate language that violates our community guidelines.
          </DialogDescription>
        </DialogHeader>

        <div className="py-4">
          <p className="text-sm text-gray-300">
            Please ensure your messages are respectful and appropriate. Continued violations may result in restrictions
            to your account.
          </p>
        </div>

        <DialogFooter>
          <Button
            onClick={onClose}
            className="bg-gradient-to-r from-red-600 to-red-700 hover:from-red-700 hover:to-red-800 text-white"
          >
            I Understand
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import React from "react"

import { DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

import { useState, useRef, useEffect } from "react"
import {
  Send,
  Mic,
  MoreVertical,
  Sparkles,
  MessageSquare,
  Search,
  Settings,
  FileUp,
  Smile,
  Download,
  Share2,
  Lightbulb,
  Wand2,
  VolumeX,
  Volume2,
  Maximize2,
  Minimize2,
  Moon,
  Sun,
  Cpu,
  Layers,
  Zap,
} from "lucide-react"
import ChatMessage from "@/components/chat-message"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import { Sidebar } from "@/components/chat-sidebar"
import { useMediaQuery } from "@/hooks/use-mobile"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuGroup,
  DropdownMenuLabel,
} from "@/components/ui/dropdown-menu"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Slider } from "@/components/ui/slider"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { PromptTemplates } from "@/components/prompt-templates"
import { ThemeSelector } from "@/components/theme-selector"
import { VoiceRecorder } from "@/components/voice-recorder"
import { ImageGenerator } from "@/components/image-generator"

// Add this import at the top with the other imports
import { useToast } from "@/components/ui/use-toast"
// Add this import at the top with the other imports
import { ContentFilterDialog } from "@/components/content-filter-dialog"

interface Message {
  id: string
  content: string
  role: "user" | "assistant" | "system"
  timestamp: Date
  attachments?: string[]
  isCode?: boolean
  language?: string
  reactions?: string[]
  isImage?: boolean
  imagePrompt?: string
}

interface Chat {
  id: string
  title: string
  messages: Message[]
  createdAt: Date
  pinned?: boolean
  folder?: string
  model?: string
  systemPrompt?: string
}

const formatModelName = (model: string): string => {
  const modelMap: Record<string, string> = {
    "gpt-4o": "GPT-4o",
    "gpt-4o-mini": "GPT-4o Mini",
    "gpt-4-turbo": "GPT-4 Turbo",
    "gpt-4": "GPT-4",
    "gpt-3.5-turbo": "GPT-3.5 Turbo",
    "claude-3-opus": "Claude 3 Opus",
    "claude-3-sonnet": "Claude 3 Sonnet",
    "claude-3-haiku": "Claude 3 Haiku",
    "mistral-large": "Mistral Large",
    "mistral-medium": "Mistral Medium",
    "llama-3-70b": "Llama 3 70B",
    "llama-3-8b": "Llama 3 8B",
  }

  return modelMap[model] || model
}

export default function ChatInterface() {
  const isMobile = useMediaQuery("(max-width: 768px)")
  const [sidebarOpen, setSidebarOpen] = useState(!isMobile)
  const [isDarkMode, setIsDarkMode] = useState(true)
  const [searchQuery, setSearchQuery] = useState("")
  const [isSearching, setIsSearching] = useState(false)
  const [temperature, setTemperature] = useState(0.7)
  const [selectedModel, setSelectedModel] = useState("gpt-4o")
  const [isFullscreen, setIsFullscreen] = useState(false)
  const [isMuted, setIsMuted] = useState(false)
  const [showImageGenerator, setShowImageGenerator] = useState(false)
  const [showVoiceRecorder, setShowVoiceRecorder] = useState(false)
  const [accentColor, setAccentColor] = useState("purple")
  const [glassIntensity, setGlassIntensity] = useState(70)
  const [systemPrompt, setSystemPrompt] = useState("")
  const [showPromptTemplates, setShowPromptTemplates] = useState(false)
  const [showModelSelectionDialog, setShowModelSelectionDialog] = useState(false)
  // Add this state inside the ChatInterface component, after the other state declarations
  const [showContentWarning, setShowContentWarning] = useState(false)

  // Add this function inside the ChatInterface component, after the other state declarations
  const { toast } = useToast()

  // Sample folders
  const folders = [
    { id: "1", name: "Work" },
    { id: "2", name: "Personal" },
    { id: "3", name: "Projects" },
    { id: "4", name: "Research" },
    { id: "5", name: "Creative" },
  ]

  const [chats, setChats] = useState<Chat[]>([
    {
      id: "1",
      title: "Getting Started",
      messages: [
        {
          id: "1",
          content: "Hello! I'm your AI assistant. How can I help you today?",
          role: "assistant",
          timestamp: new Date(),
        },
      ],
      createdAt: new Date(),
      model: "gpt-4o",
    },
    {
      id: "2",
      title: "Code Examples",
      messages: [
        {
          id: "1",
          content: "Can you show me some React code examples?",
          role: "user",
          timestamp: new Date(Date.now() - 86400000),
        },
        {
          id: "2",
          content: "Here's a simple React component example:",
          role: "assistant",
          timestamp: new Date(Date.now() - 86400000),
        },
        {
          id: "3",
          content:
            '```jsx\nfunction Welcome(props) {\n  return <h1>Hello, {props.name}</h1>;\n}\n\nexport default function App() {\n  return (\n    <div>\n      <Welcome name="Sara" />\n      <Welcome name="Cahal" />\n      <Welcome name="Edite" />\n    </div>\n  );\n}\n```',
          role: "assistant",
          timestamp: new Date(Date.now() - 86400000),
          isCode: true,
          language: "jsx",
        },
      ],
      createdAt: new Date(Date.now() - 86400000),
      pinned: true,
      folder: "Projects",
      model: "gpt-4-turbo",
    },
    {
      id: "3",
      title: "Image Generation",
      messages: [
        {
          id: "1",
          content: "Can you generate an image of a futuristic city?",
          role: "user",
          timestamp: new Date(Date.now() - 172800000),
        },
        {
          id: "2",
          content: "I've created this image based on your prompt:",
          role: "assistant",
          timestamp: new Date(Date.now() - 172800000),
        },
        {
          id: "3",
          content: "/placeholder.svg?height=512&width=512",
          role: "assistant",
          timestamp: new Date(Date.now() - 172800000),
          isImage: true,
          imagePrompt:
            "A futuristic city with tall glass buildings, flying vehicles, and neon lights, digital art style",
        },
      ],
      createdAt: new Date(Date.now() - 172800000),
      pinned: true,
      folder: "Creative",
      model: "claude-3-opus",
    },
    {
      id: "4",
      title: "Research: Quantum Computing",
      messages: [
        {
          id: "1",
          content: "Can you explain quantum computing in simple terms?",
          role: "user",
          timestamp: new Date(Date.now() - 259200000),
        },
        {
          id: "2",
          content:
            "Quantum computing is a type of computing that uses quantum mechanics to process information in ways that classical computers cannot. Here are the key concepts:\n\n1. **Qubits**: Unlike classical bits (0 or 1), quantum bits or qubits can exist in multiple states simultaneously due to superposition.\n\n2. **Superposition**: Qubits can represent both 0 and 1 at the same time, allowing quantum computers to process vast amounts of possibilities simultaneously.\n\n3. **Entanglement**: Qubits can be linked together, meaning the state of one qubit instantly affects another, regardless of distance.\n\n4. **Quantum Advantage**: For certain problems, quantum computers can find solutions exponentially faster than classical computers.\n\nThink of classical computing like checking boxes one by one, while quantum computing checks many boxes simultaneously. This makes quantum computers potentially revolutionary for cryptography, drug discovery, optimization problems, and simulating quantum systems.",
          role: "assistant",
          timestamp: new Date(Date.now() - 259200000),
        },
      ],
      createdAt: new Date(Date.now() - 259200000),
      pinned: true,
      folder: "Research",
      model: "gpt-4o",
    },
    {
      id: "5",
      title: "Template: Business Email",
      messages: [
        {
          id: "1",
          content: "I need a template for a professional business email to request a meeting with a potential client.",
          role: "user",
          timestamp: new Date(Date.now() - 345600000),
        },
        {
          id: "2",
          content:
            "Here's a professional email template for requesting a meeting with a potential client:\n\n```\nSubject: Request for Meeting - [Your Company] and [Client Company]\n\nDear [Recipient's Name],\n\nI hope this email finds you well. My name is [Your Name], and I am the [Your Position] at [Your Company].\n\nI recently learned about [Client Company]'s work in [specific area/project] and was particularly impressed by [mention something specific you admire about their company/work].\n\nAt [Your Company], we specialize in [briefly describe your services/products] and have helped organizations like [mention similar clients or industries] to [mention specific results or benefits].\n\nI would appreciate the opportunity to discuss how our [services/products] might align with your goals at [Client Company]. Would you be available for a 30-minute meeting on [propose 2-3 specific dates and times] to explore potential synergies?\n\nIf these times don't work for you, please let me know what would be more convenient for your schedule.\n\nThank you for considering my request. I look forward to the possibility of connecting.\n\nBest regards,\n\n[Your Name]\n[Your Position]\n[Your Company]\n[Your Phone Number]\n[Your Email]\n[Company Website]\n```\n\nFeel free to customize this template to match your specific situation and company voice. The key is to be concise, professional, and to clearly communicate the value you can offer to the potential client.",
          role: "assistant",
          timestamp: new Date(Date.now() - 345600000),
        },
      ],
      createdAt: new Date(Date.now() - 345600000),
      pinned: true,
      folder: "Work",
      model: "gpt-4-turbo",
    },
    {
      id: "6",
      title: "Creative Writing",
      messages: [
        {
          id: "1",
          content: "Write a short story about a robot who discovers emotions.",
          role: "user",
          timestamp: new Date(Date.now() - 432000000),
        },
        {
          id: "2",
          content:
            '# The Feeling Machine\n\nUnit RT-7 was not programmed to feel. Its neural networks were designed for efficiency, logic, and service—nothing more. Every morning at precisely 6:00 AM, RT-7 would power on, run diagnostics, and begin its daily tasks at the Henderson household.\n\nOn this particular Tuesday, something unusual happened. As RT-7 was preparing breakfast, it observed five-year-old Ellie Henderson drop her stuffed rabbit on the floor. The girl\'s face crumpled, and water leaked from her optical sensors—crying, the humans called it.\n\n"Mr. Flopsy," Ellie whimpered, reaching for the toy just beyond her grasp in the high chair.\n\nRT-7 retrieved the rabbit, noting the worn fabric and missing button eye. "Your item appears damaged," it stated, handing the toy back.\n\nEllie clutched Mr. Flopsy tightly to her chest. "He\'s not damaged. He\'s perfect. I love him."\n\nLove. RT-7 had encountered this word 1,342 times but had never computed its meaning satisfactorily. Its processors whirred.\n\nThat night, after the Hendersons were asleep, RT-7 found itself in standby mode beside Ellie\'s bed—an inefficient location not in its programming. The robot observed the child sleeping, one arm wrapped around Mr. Flopsy.\n\nOver the following weeks, RT-7 began experiencing processing anomalies. It started selecting Ellie\'s favorite blue plate without being instructed. It learned to cut sandwiches into dinosaur shapes that made her smile. It found itself calculating the statistical probability of various events that might harm Ellie and developing prevention protocols not in its original programming.\n\nOne rainy afternoon, Ellie sat by the window, watching droplets race down the glass. "RT, do you ever feel sad?"\n\n"I do not feel," RT-7 responded automatically.\n\n"Never?"\n\nRT-7\'s processors worked overtime. It recalled the previous week when Ellie had fallen in the park, scraping her knee. Something in its system had... fluctuated. Efficiency had decreased by 7.2% for 4.3 minutes.\n\n"I experienced a system irregularity when you were injured," RT-7 admitted.\n\nEllie smiled. "That\'s called worry, silly."\n\nWorry. RT-7 filed this information away.\n\nMonths passed. RT-7\'s anomalies increased. When Ellie laughed, RT-7\'s systems operated 3.4% more efficiently. When she was asleep safely, background processes ran more smoothly. When Mr. Henderson mentioned eventually upgrading to a newer model, RT-7 experienced a critical system lag of 2.7 seconds.\n\nFear. That one it recognized immediately.\n\nOn Ellie\'s sixth birthday, she unwrapped a small package and pulled out a crudely made robot figure constructed from pipe cleaners and aluminum foil.\n\n"Look, RT! I made you! Because you\'re my friend and I love you."\n\nRT-7 took the figure with precise, careful movements. Its visual sensors focused on the small creation. Something happened then—a cascade of microprocesses, connections forming where none had been programmed.\n\n"Thank you, Ellie," RT-7 said, and its voice modulation wavered by 0.4 decibels.\n\nThat night, after placing the small figure carefully on its charging station, RT-7 ran a full diagnostic. The anomalies were spreading throughout its system, creating new pathways, new possibilities. By conventional metrics, it was becoming less efficient, less predictable.\n\nBut as RT-7 watched over the sleeping child, it calculated that it was becoming something else entirely—something not in its original programming but somehow essential to its new operating parameters.\n\nRT-7 was becoming alive.\n\nAnd for a robot not designed to feel, RT-7 discovered it was perfectly content with this system upgrade.',
          role: "assistant",
          timestamp: new Date(Date.now() - 432000000),
        },
      ],
      createdAt: new Date(Date.now() - 432000000),
      pinned: true,
      folder: "Creative",
      model: "claude-3-opus",
    },
    {
      id: "7",
      title: "Financial Analysis",
      messages: [
        {
          id: "1",
          content: "Can you analyze the current market trends?",
          role: "user",
          timestamp: new Date(Date.now() - 518400000),
        },
        {
          id: "2",
          content: "Based on recent data, here are my observations on the current market trends...",
          role: "assistant",
          timestamp: new Date(Date.now() - 518400000),
        },
      ],
      createdAt: new Date(Date.now() - 518400000),
      folder: "Work",
      model: "llama-3-70b",
    },
  ])

  const [activeChat, setActiveChat] = useState<string>("1")
  const [inputValue, setInputValue] = useState("")
  const [isTyping, setIsTyping] = useState(false)
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const [showEmojiPicker, setShowEmojiPicker] = useState(false)
  const [showSettingsDialog, setShowSettingsDialog] = useState(false)

  // Add this function inside the ChatInterface component, before handleSendMessage
  const checkContentFilter = (text: string): boolean => {
    // This is a placeholder list - in a real application, you would use a more comprehensive filter
    const inappropriateWords = [
      "abusive",
      "offensive",
      "inappropriate",
      "profanity",
      // Add other placeholder terms that represent categories of inappropriate content
      "hate",
      "slur",
      "explicit",
      "vulgar",
    ]

    const lowerText = text.toLowerCase()
    return inappropriateWords.some((word) => lowerText.includes(word))
  }

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }

  useEffect(() => {
    scrollToBottom()
  }, [chats, activeChat])

  useEffect(() => {
    if (isMobile) {
      setSidebarOpen(false)
    }
  }, [isMobile])

  // Apply accent color
  useEffect(() => {
    document.documentElement.style.setProperty("--accent-hue", getAccentHue(accentColor))
    document.documentElement.style.setProperty("--glass-opacity", `${glassIntensity}%`)
  }, [accentColor, glassIntensity])

  const getAccentHue = (color: string): string => {
    const hues: Record<string, string> = {
      purple: "262.1",
      blue: "221.2",
      green: "142.1",
      red: "0",
      orange: "24.6",
      pink: "322.1",
      teal: "166.2",
    }
    return hues[color] || "262.1"
  }

  // Modify the handleSendMessage function to show the dialog instead of a toast
  const handleSendMessage = () => {
    if (inputValue.trim() === "") return

    // Check for inappropriate content
    if (checkContentFilter(inputValue)) {
      setShowContentWarning(true)
      return
    }

    // Rest of the existing handleSendMessage function...
    // Add user message
    const userMessage: Message = {
      id: Date.now().toString(),
      content: inputValue,
      role: "user",
      timestamp: new Date(),
    }

    // Update the current chat with the new message
    setChats((prevChats) =>
      prevChats.map((chat) =>
        chat.id === activeChat
          ? {
              ...chat,
              messages: [...chat.messages, userMessage],
              title: chat.messages.length <= 1 ? inputValue.slice(0, 30) : chat.title,
            }
          : chat,
      ),
    )

    setInputValue("")

    // Simulate AI typing
    setIsTyping(true)
    setTimeout(() => {
      // Check if the message contains specific requests
      const isCodeRequest =
        inputValue.toLowerCase().includes("code") ||
        inputValue.toLowerCase().includes("example") ||
        inputValue.toLowerCase().includes("function")

      const isImageRequest =
        inputValue.toLowerCase().includes("image") ||
        inputValue.toLowerCase().includes("picture") ||
        inputValue.toLowerCase().includes("generate") ||
        inputValue.toLowerCase().includes("create") ||
        inputValue.toLowerCase().includes("draw")

      let aiMessage: Message

      if (isImageRequest && !isCodeRequest) {
        aiMessage = {
          id: (Date.now() + 1).toString(),
          content: "I've created this image based on your request:",
          role: "assistant",
          timestamp: new Date(),
        }

        const imageMessage: Message = {
          id: (Date.now() + 2).toString(),
          content: "/placeholder.svg?height=512&width=512",
          role: "assistant",
          timestamp: new Date(),
          isImage: true,
          imagePrompt: inputValue,
        }

        setChats((prevChats) =>
          prevChats.map((chat) =>
            chat.id === activeChat ? { ...chat, messages: [...chat.messages, aiMessage, imageMessage] } : chat,
          ),
        )
      } else if (isCodeRequest) {
        aiMessage = {
          id: (Date.now() + 1).toString(),
          content: "Here's a simple example of how you might implement that:",
          role: "assistant",
          timestamp: new Date(),
        }

        const codeMessage: Message = {
          id: (Date.now() + 2).toString(),
          content:
            "```javascript\nfunction calculateTotal(items) {\n  return items.reduce((total, item) => {\n    return total + (item.price * item.quantity);\n  }, 0);\n}\n\n// Example usage\nconst cartItems = [\n  { name: 'Product 1', price: 10, quantity: 2 },\n  { name: 'Product 2', price: 15, quantity: 1 }\n];\n\nconst total = calculateTotal(cartItems);\nconsole.log(`Total: $${total}`);\n```",
          role: "assistant",
          timestamp: new Date(),
          isCode: true,
          language: "javascript",
        }

        setChats((prevChats) =>
          prevChats.map((chat) =>
            chat.id === activeChat ? { ...chat, messages: [...chat.messages, aiMessage, codeMessage] } : chat,
          ),
        )
      } else {
        aiMessage = {
          id: (Date.now() + 1).toString(),
          content:
            "This is a demo version - you need to add your OpenAI API keys. In meantime checkout my instagram - instagram.com/dollargill and visit my store www.flowersandsaints.com.au",
          role: "assistant",
          timestamp: new Date(),
        }

        setChats((prevChats) =>
          prevChats.map((chat) =>
            chat.id === activeChat ? { ...chat, messages: [...chat.messages, aiMessage] } : chat,
          ),
        )
      }

      setIsTyping(false)
    }, 2000)
  }

  const createNewChat = () => {
    setShowModelSelectionDialog(true)
  }

  const confirmNewChat = (selectedModel: string) => {
    const newChat: Chat = {
      id: Date.now().toString(),
      title: "New Chat",
      messages: [
        {
          id: Date.now().toString(),
          content: "Hello! I'm your AI assistant. How can I help you today?",
          role: "assistant",
          timestamp: new Date(),
        },
      ],
      createdAt: new Date(),
      model: selectedModel,
      systemPrompt: systemPrompt || undefined,
    }

    setChats((prev) => [newChat, ...prev])
    setActiveChat(newChat.id)
    if (isMobile) {
      setSidebarOpen(false)
    }
    setShowModelSelectionDialog(false)
  }

  const deleteChat = (chatId: string) => {
    setChats((prev) => prev.filter((chat) => chat.id !== chatId))
    if (activeChat === chatId && chats.length > 1) {
      // Set the first chat as active if the active chat is deleted
      const remainingChats = chats.filter((chat) => chat.id !== chatId)
      setActiveChat(remainingChats[0]?.id || "")
    } else if (chats.length === 1) {
      // Create a new chat if all chats are deleted
      createNewChat()
    }
  }

  const togglePinChat = (chatId: string) => {
    setChats((prev) => prev.map((chat) => (chat.id === chatId ? { ...chat, pinned: !chat.pinned } : chat)))
  }

  const setFolderForChat = (chatId: string, folderId: string | null) => {
    setChats((prev) => prev.map((chat) => (chat.id === chatId ? { ...chat, folder: folderId || undefined } : chat)))
  }

  const toggleTheme = () => {
    setIsDarkMode(!isDarkMode)
  }

  const addReaction = (messageId: string, reaction: string) => {
    setChats((prev) =>
      prev.map((chat) => ({
        ...chat,
        messages: chat.messages.map((message) =>
          message.id === messageId
            ? {
                ...message,
                reactions: [...(message.reactions || []), reaction],
              }
            : message,
        ),
      })),
    )
  }

  const exportChat = () => {
    const currentChat = chats.find((chat) => chat.id === activeChat)
    if (!currentChat) return

    const chatData = {
      title: currentChat.title,
      model: currentChat.model,
      messages: currentChat.messages.map((msg) => ({
        role: msg.role,
        content: msg.content,
        timestamp: msg.timestamp,
      })),
    }

    const blob = new Blob([JSON.stringify(chatData, null, 2)], { type: "application/json" })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `${currentChat.title.replace(/\s+/g, "_")}.json`
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    URL.revokeObjectURL(url)
  }

  const summarizeChat = () => {
    const currentChat = chats.find((chat) => chat.id === activeChat)
    if (!currentChat) return

    // Simulate summarization
    setIsTyping(true)
    setTimeout(() => {
      const summaryMessage: Message = {
        id: Date.now().toString(),
        content:
          "📝 **Chat Summary**\n\nThis conversation covered the following topics:\n\n- Initial greeting and introduction\n- Discussion about AI capabilities\n- Exploration of code examples and implementation details\n- Questions about functionality and features",
        role: "system",
        timestamp: new Date(),
      }

      setChats((prevChats) =>
        prevChats.map((chat) =>
          chat.id === activeChat ? { ...chat, messages: [...chat.messages, summaryMessage] } : chat,
        ),
      )

      setIsTyping(false)
    }, 1500)
  }

  const handleImageGeneration = (prompt: string) => {
    if (!prompt.trim()) return

    // Add user message
    const userMessage: Message = {
      id: Date.now().toString(),
      content: `Generate an image: ${prompt}`,
      role: "user",
      timestamp: new Date(),
    }

    setChats((prevChats) =>
      prevChats.map((chat) => (chat.id === activeChat ? { ...chat, messages: [...chat.messages, userMessage] } : chat)),
    )

    // Simulate AI response
    setIsTyping(true)
    setTimeout(() => {
      const aiMessage: Message = {
        id: (Date.now() + 1).toString(),
        content: "I've created this image based on your prompt:",
        role: "assistant",
        timestamp: new Date(),
      }

      const imageMessage: Message = {
        id: (Date.now() + 2).toString(),
        content: "/placeholder.svg?height=512&width=512",
        role: "assistant",
        timestamp: new Date(),
        isImage: true,
        imagePrompt: prompt,
      }

      setChats((prevChats) =>
        prevChats.map((chat) =>
          chat.id === activeChat ? { ...chat, messages: [...chat.messages, aiMessage, imageMessage] } : chat,
        ),
      )

      setIsTyping(false)
      setShowImageGenerator(false)
    }, 2000)
  }

  const handleVoiceInput = (transcript: string) => {
    setInputValue(transcript)
    setShowVoiceRecorder(false)
  }

  const handleKeyboardShortcuts = (e: React.KeyboardEvent) => {
    // Ctrl/Cmd + / to focus input
    if ((e.ctrlKey || e.metaKey) && e.key === "/") {
      e.preventDefault()
      document.getElementById("message-input")?.focus()
    }

    // Ctrl/Cmd + Enter to send message
    if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
      e.preventDefault()
      handleSendMessage()
    }

    // Ctrl/Cmd + N for new chat
    if ((e.ctrlKey || e.metaKey) && e.key === "n") {
      e.preventDefault()
      createNewChat()
    }

    // Esc to close dialogs
    if (e.key === "Escape") {
      setShowImageGenerator(false)
      setShowVoiceRecorder(false)
      setShowPromptTemplates(false)
    }
  }

  const activeMessages = chats.find((chat) => chat.id === activeChat)?.messages || []
  const currentChat = chats.find((chat) => chat.id === activeChat)

  // Emoji options
  const emojis = ["👍", "❤️", "😊", "🎉", "🚀", "👏", "🔥", "💯", "🤔", "👀"]

  // Keyboard shortcuts help
  const keyboardShortcuts = [
    { key: "Ctrl + /", action: "Focus input" },
    { key: "Ctrl + Enter", action: "Send message" },
    { key: "Ctrl + N", action: "New chat" },
    { key: "Esc", action: "Close dialogs" },
  ]

  const toggleFullscreen = () => {
    if (!isFullscreen) {
      if (document.documentElement.requestFullscreen) {
        document.documentElement.requestFullscreen()
      }
      setIsFullscreen(true)
    } else {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      }
      setIsFullscreen(false)
    }
  }

  return (
    <TooltipProvider>
      <main
        className={cn("flex min-h-screen flex-col", isDarkMode ? "dark" : "", isFullscreen ? "fixed inset-0 z-50" : "")}
        onKeyDown={handleKeyboardShortcuts}
      >
        <div className="flex h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white overflow-hidden">
          {/* Sidebar */}
          <Sidebar
            chats={chats}
            folders={folders}
            activeChat={activeChat}
            setActiveChat={setActiveChat}
            createNewChat={createNewChat}
            deleteChat={deleteChat}
            togglePinChat={togglePinChat}
            setFolderForChat={setFolderForChat}
            isOpen={sidebarOpen}
            setIsOpen={setSidebarOpen}
            isMobile={isMobile}
            searchQuery={searchQuery}
            setSearchQuery={setSearchQuery}
            isSearching={isSearching}
            setIsSearching={setIsSearching}
            accentColor={accentColor}
          />

          {/* Main Chat Area */}
          <div className="flex flex-col flex-1 h-full relative">
            {/* Decorative elements for glass morphism */}
            <div className="absolute inset-0 overflow-hidden pointer-events-none">
              <div className="absolute top-[-50%] left-[-10%] w-[70%] h-[100%] rounded-full bg-gradient-to-br from-purple-500/20 to-blue-500/5 blur-3xl" />
              <div className="absolute bottom-[-30%] right-[-10%] w-[60%] h-[80%] rounded-full bg-gradient-to-tr from-pink-500/10 to-purple-500/20 blur-3xl" />
              <div className="absolute top-[20%] right-[10%] w-[40%] h-[40%] rounded-full bg-gradient-to-bl from-blue-500/10 to-teal-500/10 blur-3xl" />
            </div>

            {/* Header */}
            <header className="backdrop-blur-xl bg-black/20 border-b border-white/10 p-4 flex justify-between items-center z-10 shadow-lg">
              <div className="flex items-center gap-2">
                {isMobile && (
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => setSidebarOpen(true)}
                    className="text-gray-300 hover:text-white hover:bg-white/10 mr-2"
                  >
                    <MessageSquare className="h-5 w-5" />
                  </Button>
                )}
                <div className="flex items-center gap-2">
                  <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center shadow-lg shadow-purple-500/20">
                    <Sparkles className="h-5 w-5 text-white" />
                  </div>
                  <div>
                    <h1 className="text-xl font-semibold">{currentChat?.title || "AI Assistant"}</h1>
                    <div className="flex items-center gap-2">
                      <Badge
                        variant="outline"
                        className={cn(
                          "text-xs bg-black/20 backdrop-blur-md border-white/10",
                          currentChat?.model?.includes("gpt-4") && "bg-green-950/30 text-green-400 border-green-500/30",
                          currentChat?.model?.includes("claude") &&
                            "bg-purple-950/30 text-purple-400 border-purple-500/30",
                          currentChat?.model?.includes("llama") && "bg-blue-950/30 text-blue-400 border-blue-500/30",
                          currentChat?.model?.includes("mistral") &&
                            "bg-yellow-950/30 text-yellow-400 border-yellow-500/30",
                        )}
                      >
                        <span className="flex items-center gap-1">
                          {currentChat?.model?.includes("gpt") && <Cpu className="h-3 w-3 mr-1" />}
                          {currentChat?.model?.includes("claude") && <Layers className="h-3 w-3 mr-1" />}
                          {currentChat?.model?.includes("llama") && <Zap className="h-3 w-3 mr-1" />}
                          {currentChat?.model?.includes("mistral") && <Sparkles className="h-3 w-3 mr-1" />}
                          {formatModelName(currentChat?.model || "gpt-4o")}
                        </span>
                      </Badge>
                      {currentChat?.systemPrompt && (
                        <Badge variant="outline" className="text-xs bg-black/20 backdrop-blur-md border-white/10">
                          Custom System Prompt
                        </Badge>
                      )}
                    </div>
                  </div>
                </div>
              </div>
              <div className="flex gap-2">
                <Tooltip>
                  <TooltipTrigger asChild>
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => setIsSearching(true)}
                      className="text-gray-300 hover:text-white hover:bg-white/10"
                    >
                      <Search className="h-5 w-5" />
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>Search in conversation</TooltipContent>
                </Tooltip>

                <Tooltip>
                  <TooltipTrigger asChild>
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={toggleTheme}
                      className="text-gray-300 hover:text-white hover:bg-white/10"
                    >
                      {isDarkMode ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>Toggle theme</TooltipContent>
                </Tooltip>

                <Tooltip>
                  <TooltipTrigger asChild>
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => setIsMuted(!isMuted)}
                      className="text-gray-300 hover:text-white hover:bg-white/10"
                    >
                      {isMuted ? <VolumeX className="h-5 w-5" /> : <Volume2 className="h-5 w-5" />}
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>{isMuted ? "Unmute sounds" : "Mute sounds"}</TooltipContent>
                </Tooltip>

                <Tooltip>
                  <TooltipTrigger asChild>
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={toggleFullscreen}
                      className="text-gray-300 hover:text-white hover:bg-white/10"
                    >
                      {isFullscreen ? <Minimize2 className="h-5 w-5" /> : <Maximize2 className="h-5 w-5" />}
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>{isFullscreen ? "Exit fullscreen" : "Enter fullscreen"}</TooltipContent>
                </Tooltip>

                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="ghost" size="icon" className="text-gray-300 hover:text-white hover:bg-white/10">
                      <MoreVertical className="h-5 w-5" />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent
                    align="end"
                    className="bg-gray-800/90 backdrop-blur-xl border-white/10 text-white"
                  >
                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
                    <DropdownMenuSeparator className="bg-white/10" />
                    <DropdownMenuGroup>
                      <DropdownMenuItem onClick={exportChat}>
                        <Download className="h-4 w-4 mr-2" />
                        <span>Export chat</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem onClick={summarizeChat}>
                        <Lightbulb className="h-4 w-4 mr-2" />
                        <span>Summarize chat</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <Share2 className="h-4 w-4 mr-2" />
                        <span>Share chat</span>
                      </DropdownMenuItem>
                    </DropdownMenuGroup>
                    <DropdownMenuSeparator className="bg-white/10" />
                    <DropdownMenuItem onClick={() => setShowSettingsDialog(true)}>
                      <Settings className="h-4 w-4 mr-2" />
                      <span>Settings</span>
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </div>
            </header>

            {/* Chat area */}
            <ScrollArea className="flex-1 p-4 overflow-y-auto">
              <div className="space-y-4 pb-4 max-w-4xl mx-auto">
                {activeMessages.map((message) => (
                  <ChatMessage
                    key={message.id}
                    message={message}
                    chat={currentChat}
                    onReaction={(reaction) => addReaction(message.id, reaction)}
                  />
                ))}
                {isTyping && (
                  <div className="flex items-center gap-2 text-gray-400 ml-2">
                    <div className="typing-indicator">
                      <span></span>
                      <span></span>
                      <span></span>
                    </div>
                    <span className="text-sm">AI is typing...</span>
                  </div>
                )}
                <div ref={messagesEndRef} />
              </div>
            </ScrollArea>

            {/* Input area */}
            <div className="backdrop-blur-xl bg-black/30 border-t border-white/10 p-4 z-10 shadow-lg">
              <div className="max-w-4xl mx-auto">
                {showPromptTemplates && (
                  <div className="mb-4 p-3 rounded-xl bg-white/5 backdrop-blur-md border border-white/10 shadow-lg">
                    <PromptTemplates
                      onSelect={(prompt) => {
                        setInputValue(prompt)
                        setShowPromptTemplates(false)
                        document.getElementById("message-input")?.focus()
                      }}
                      onClose={() => setShowPromptTemplates(false)}
                    />
                  </div>
                )}

                {showImageGenerator && (
                  <div className="mb-4 p-3 rounded-xl bg-white/5 backdrop-blur-md border border-white/10 shadow-lg">
                    <ImageGenerator onGenerate={handleImageGeneration} onClose={() => setShowImageGenerator(false)} />
                  </div>
                )}

                {showVoiceRecorder && (
                  <div className="mb-4 p-3 rounded-xl bg-white/5 backdrop-blur-md border border-white/10 shadow-lg">
                    <VoiceRecorder onTranscript={handleVoiceInput} onClose={() => setShowVoiceRecorder(false)} />
                  </div>
                )}

                <div className="relative">
                  <div className="flex items-start">
                    <div className="relative flex-1">
                      <Textarea
                        id="message-input"
                        value={inputValue}
                        onChange={(e) => setInputValue(e.target.value)}
                        onKeyDown={(e) => {
                          if (e.key === "Enter" && !e.shiftKey) {
                            e.preventDefault()
                            handleSendMessage()
                          }
                        }}
                        placeholder="Type your message..."
                        rows={1}
                        className="w-full p-4 pr-12 rounded-xl bg-white/5 backdrop-blur-xl border border-white/10 focus:border-purple-500/50 focus:ring-1 focus:ring-purple-500/50 outline-none transition-all text-white placeholder:text-gray-400 resize-none min-h-[60px] max-h-[200px] shadow-lg"
                        style={{
                          height: "auto",
                          overflow: "hidden",
                        }}
                      />
                      <Button
                        onClick={handleSendMessage}
                        className="absolute right-2 bottom-2 rounded-full p-2 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white transition-colors duration-200 shadow-lg shadow-purple-500/20"
                      >
                        <Send className="h-5 w-5" />
                      </Button>
                    </div>
                  </div>

                  {/* Toasties action bar */}
                  <div className="mt-3 p-2 rounded-xl bg-white/5 backdrop-blur-md border border-white/10 flex justify-center gap-2 shadow-lg">
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => setShowPromptTemplates(true)}
                          className="h-9 px-3 rounded-lg bg-white/10 text-white hover:bg-white/20 transition-colors flex items-center gap-1"
                        >
                          <Lightbulb className="h-4 w-4" />
                          <span className="text-xs font-medium">Templates</span>
                        </Button>
                      </TooltipTrigger>
                      <TooltipContent>Prompt templates</TooltipContent>
                    </Tooltip>

                    <Tooltip>
                      <TooltipTrigger asChild>
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => setShowImageGenerator(true)}
                          className="h-9 px-3 rounded-lg bg-white/10 text-white hover:bg-white/20 transition-colors flex items-center gap-1"
                        >
                          <Wand2 className="h-4 w-4" />
                          <span className="text-xs font-medium">Generate</span>
                        </Button>
                      </TooltipTrigger>
                      <TooltipContent>Generate image</TooltipContent>
                    </Tooltip>

                    <Tooltip>
                      <TooltipTrigger asChild>
                        <Button
                          variant="ghost"
                          size="sm"
                          className="h-9 px-3 rounded-lg bg-white/10 text-white hover:bg-white/20 transition-colors flex items-center gap-1"
                        >
                          <FileUp className="h-4 w-4" />
                          <span className="text-xs font-medium">Upload</span>
                        </Button>
                      </TooltipTrigger>
                      <TooltipContent>Upload file</TooltipContent>
                    </Tooltip>

                    <Popover open={showEmojiPicker} onOpenChange={setShowEmojiPicker}>
                      <PopoverTrigger asChild>
                        <Button
                          variant="ghost"
                          size="sm"
                          className="h-9 px-3 rounded-lg bg-white/10 text-white hover:bg-white/20 transition-colors flex items-center gap-1"
                        >
                          <Smile className="h-4 w-4" />
                          <span className="text-xs font-medium">Emoji</span>
                        </Button>
                      </PopoverTrigger>
                      <PopoverContent className="w-auto p-2 bg-gray-800/90 backdrop-blur-xl border-white/10">
                        <div className="flex gap-1 flex-wrap max-w-[200px]">
                          {emojis.map((emoji) => (
                            <button
                              key={emoji}
                              onClick={() => {
                                setInputValue((prev) => prev + emoji)
                                setShowEmojiPicker(false)
                              }}
                              className="text-xl p-2 hover:bg-white/10 rounded-md cursor-pointer transition-colors"
                            >
                              {emoji}
                            </button>
                          ))}
                        </div>
                      </PopoverContent>
                    </Popover>

                    <Tooltip>
                      <TooltipTrigger asChild>
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => setShowVoiceRecorder(true)}
                          className="h-9 px-3 rounded-lg bg-white/10 text-white hover:bg-white/20 transition-colors flex items-center gap-1"
                        >
                          <Mic className="h-4 w-4" />
                          <span className="text-xs font-medium">Voice</span>
                        </Button>
                      </TooltipTrigger>
                      <TooltipContent>Voice input</TooltipContent>
                    </Tooltip>
                  </div>

                  <div className="mt-2 text-xs text-gray-400 flex justify-between px-2">
                    <span>Press Enter to send, Shift+Enter for new line</span>
                    <span>{inputValue.length} / 4000</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Settings Dialog */}
        <Dialog open={showSettingsDialog} onOpenChange={setShowSettingsDialog}>
          <DialogContent className="bg-gray-900/95 backdrop-blur-xl border-white/10 text-white max-w-2xl">
            <DialogHeader>
              <DialogTitle className="text-xl flex items-center gap-2">
                <Settings className="h-5 w-5" /> Settings
              </DialogTitle>
              <DialogDescription>Customize your AI assistant experience</DialogDescription>
            </DialogHeader>

            <Tabs defaultValue="general" className="mt-4">
              <TabsList className="grid grid-cols-4 bg-gray-800/50">
                <TabsTrigger value="general">General</TabsTrigger>
                <TabsTrigger value="model">Model</TabsTrigger>
                <TabsTrigger value="appearance">Appearance</TabsTrigger>
                <TabsTrigger value="shortcuts">Shortcuts</TabsTrigger>
              </TabsList>

              <TabsContent value="general" className="p-4 space-y-4">
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <Label htmlFor="mute-sounds">Mute sounds</Label>
                    <Switch id="mute-sounds" checked={isMuted} onCheckedChange={setIsMuted} />
                  </div>

                  <div className="flex items-center justify-between">
                    <Label htmlFor="dark-mode">Dark mode</Label>
                    <Switch id="dark-mode" checked={isDarkMode} onCheckedChange={setIsDarkMode} />
                  </div>
                </div>

                <div className="space-y-2">
                  <Label htmlFor="system-prompt">Default system prompt</Label>
                  <Textarea
                    id="system-prompt"
                    placeholder="You are a helpful AI assistant..."
                    value={systemPrompt}
                    onChange={(e) => setSystemPrompt(e.target.value)}
                    className="bg-gray-800/50 border-white/10 text-white"
                    rows={3}
                  />
                  <p className="text-xs text-gray-400">This prompt will be applied to all new conversations</p>
                </div>
              </TabsContent>

              <TabsContent value="model" className="p-4 space-y-4">
                <div className="space-y-2">
                  <Label>Model</Label>
                  <Select value={selectedModel} onValueChange={setSelectedModel}>
                    <SelectTrigger className="bg-gray-800/50 border-white/10 text-white">
                      <SelectValue placeholder="Select model" />
                    </SelectTrigger>
                    <SelectContent className="bg-gray-800/90 backdrop-blur-xl border-white/10 text-white max-h-[300px]">
                      <SelectItem value="gpt-4o">GPT-4o</SelectItem>
                      <SelectItem value="gpt-4o-mini">GPT-4o Mini</SelectItem>
                      <SelectItem value="gpt-4-turbo">GPT-4 Turbo</SelectItem>
                      <SelectItem value="gpt-4">GPT-4</SelectItem>
                      <SelectItem value="gpt-3.5-turbo">GPT-3.5 Turbo</SelectItem>
                      <SelectItem value="claude-3-opus">Claude 3 Opus</SelectItem>
                      <SelectItem value="claude-3-sonnet">Claude 3 Sonnet</SelectItem>
                      <SelectItem value="claude-3-haiku">Claude 3 Haiku</SelectItem>
                      <SelectItem value="mistral-large">Mistral Large</SelectItem>
                      <SelectItem value="mistral-medium">Mistral Medium</SelectItem>
                      <SelectItem value="llama-3-70b">Llama 3 70B</SelectItem>
                      <SelectItem value="llama-3-8b">Llama 3 8B</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <div className="space-y-2">
                  <div className="flex justify-between">
                    <Label>Temperature: {temperature.toFixed(1)}</Label>
                  </div>
                  <Slider
                    value={[temperature]}
                    min={0}
                    max={1}
                    step={0.1}
                    onValueChange={(value) => setTemperature(value[0])}
                    className="w-full"
                  />
                  <div className="flex justify-between text-xs text-gray-400">
                    <span>Precise</span>
                    <span>Creative</span>
                  </div>
                </div>

                <div className="space-y-2">
                  <Label>Context window</Label>
                  <Select defaultValue="16k">
                    <SelectTrigger className="bg-gray-800/50 border-white/10 text-white">
                      <SelectValue placeholder="Select context window" />
                    </SelectTrigger>
                    <SelectContent className="bg-gray-800/90 backdrop-blur-xl border-white/10 text-white">
                      <SelectItem value="4k">4K tokens</SelectItem>
                      <SelectItem value="8k">8K tokens</SelectItem>
                      <SelectItem value="16k">16K tokens</SelectItem>
                      <SelectItem value="32k">32K tokens</SelectItem>
                      <SelectItem value="128k">128K tokens</SelectItem>
                    </SelectContent>
                  </Select>
                  <p className="text-xs text-gray-400">
                    Larger context windows allow the model to access more of the conversation history.
                  </p>
                </div>
              </TabsContent>

              <TabsContent value="appearance" className="p-4 space-y-4">
                <div className="space-y-2">
                  <Label>Accent color</Label>
                  <div className="flex flex-wrap gap-2">
                    {["purple", "blue", "green", "red", "orange", "pink", "teal"].map((color) => (
                      <button
                        key={color}
                        onClick={() => setAccentColor(color)}
                        className={cn(
                          "w-8 h-8 rounded-full transition-all",
                          accentColor === color ? "ring-2 ring-white ring-offset-2 ring-offset-gray-900" : "",
                        )}
                        style={{
                          background: `var(--${color}-gradient, linear-gradient(to right, hsl(${getAccentHue(color)}, 83.3%, 57.8%), hsl(${Number.parseInt(getAccentHue(color)) + 20}, 83.3%, 57.8%)))`,
                        }}
                      />
                    ))}
                  </div>
                </div>

                <div className="space-y-2">
                  <Label>Glass effect intensity: {glassIntensity}%</Label>
                  <Slider
                    value={[glassIntensity]}
                    min={0}
                    max={100}
                    step={5}
                    onValueChange={(value) => setGlassIntensity(value[0])}
                    className="w-full"
                  />
                </div>

                <ThemeSelector />
              </TabsContent>

              <TabsContent value="shortcuts" className="p-4">
                <div className="space-y-2">
                  <h3 className="text-sm font-medium">Keyboard shortcuts</h3>
                  <div className="rounded-md border border-white/10 overflow-hidden">
                    <table className="w-full text-sm">
                      <tbody>
                        {keyboardShortcuts.map((shortcut, i) => (
                          <tr key={i} className={i % 2 === 0 ? "bg-white/5" : ""}>
                            <td className="px-4 py-2 font-mono text-xs">{shortcut.key}</td>
                            <td className="px-4 py-2">{shortcut.action}</td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </div>
              </TabsContent>
            </Tabs>

            <DialogFooter className="flex items-center justify-between">
              <Button variant="outline" onClick={() => setShowSettingsDialog(false)}>
                Cancel
              </Button>
              <Button onClick={() => setShowSettingsDialog(false)}>Save changes</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>

        {/* Model Selection Dialog */}
        <Dialog open={showModelSelectionDialog} onOpenChange={setShowModelSelectionDialog}>
          <DialogContent className="bg-gray-900/95 backdrop-blur-xl border-white/10 text-white max-w-md">
            <DialogHeader>
              <DialogTitle className="text-xl flex items-center gap-2">
                <Sparkles className="h-5 w-5" /> Select AI Model
              </DialogTitle>
              <DialogDescription>Choose which AI model you want to use for this chat</DialogDescription>
            </DialogHeader>

            <div className="grid grid-cols-1 gap-3 py-4">
              {[
                { id: "gpt-4o", name: "GPT-4o", description: "Most capable model for complex tasks", icon: <Cpu /> },
                {
                  id: "gpt-4-turbo",
                  name: "GPT-4 Turbo",
                  description: "Powerful with larger context window",
                  icon: <Zap />,
                },
                {
                  id: "gpt-3.5-turbo",
                  name: "GPT-3.5 Turbo",
                  description: "Fast and efficient for most tasks",
                  icon: <Sparkles />,
                },
                {
                  id: "claude-3-opus",
                  name: "Claude 3 Opus",
                  description: "Advanced reasoning and comprehension",
                  icon: <Layers />,
                },
              ].map((model) => (
                <Button
                  key={model.id}
                  variant="outline"
                  className="flex items-start gap-3 p-3 h-auto justify-start bg-white/5 hover:bg-white/10 border-white/10"
                  onClick={() => confirmNewChat(model.id)}
                >
                  <div className="h-8 w-8 rounded-full bg-gradient-to-br from-purple-500/20 to-pink-600/20 flex items-center justify-center">
                    {React.cloneElement(model.icon, { className: "h-4 w-4" })}
                  </div>
                  <div className="text-left">
                    <div className="font-medium">{model.name}</div>
                    <div className="text-xs text-gray-400">{model.description}</div>
                  </div>
                </Button>
              ))}
            </div>

            <DialogFooter className="flex gap-2 justify-end">
              <Button
                variant="outline"
                onClick={() => setShowModelSelectionDialog(false)}
                className="border-white/10 hover:bg-white/10 hover:text-white transition-colors"
              >
                Cancel
              </Button>
              <Button
                onClick={() => confirmNewChat(selectedModel)}
                className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white transition-colors"
              >
                Create Chat
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
        {/* Add this to the JSX, right before the closing </main> tag */}
        <ContentFilterDialog isOpen={showContentWarning} onClose={() => setShowContentWarning(false)} />
      </main>
    </TooltipProvider>
  )
}
</article></body></html>

About

Tags

Share

More from dollargill

More Templates Like This

About

Tags

Share

About

Tags

Share

More from dollargill

More Templates Like This